<template>
  <div class="page">
    <m-header :title="langText&&langText.register" :canback="Boolean(1)">

      <select class="sel" v-model="langId" @change="getselLang()">
        <option v-for="item in langList" :key="item.id" :value="item.id">{{item.lang}}</option>
      </select>
    </m-header>
    <section class="body">
      <form class="tj-form">
        <!-- <div class="form-item">
          <label for="name">用户名</label>
          <input type="text" placeholder="英文数字组成" v-model="formData.username">
        </div>-->
        <div class="form-item">
          <label for="name">{{langText&&langText.username}}</label>
          <input type="text" :placeholder="langText&&langText.peun" v-model="formData.realname"  />
        </div>
        <div class="form-item">
          <label for="name">{{langText&&langText.mail}}</label>
          <input type="text" :placeholder="langText&&langText.peten" v-model="formData.email" @blur="confirmE" />
        </div>
        <div class="form-item">
          <label for="name">{{langText&&langText.password}}</label>
          <input
            type="password"
            :placeholder="langText&&langText.password"
            @blur="IsIntegerAndEnglishCharacter($event)"
            v-model="formData.password"
          />
        </div>

        <div class="form-item">
          <label for="name">{{langText&&langText.password2}}</label>
          <input type="password" :placeholder="langText&&langText.password" @blur="confirmL($event)" />
        </div>
        <div class="form-item">
          <label for="name">{{langText&&langText.paypwd}}</label>
          <input type="password" :placeholder="langText&&langText.pe6d" v-model="formData.paypwd" maxlength="6" />
        </div>
        <div class="form-item">
          <label for="name">{{langText&&langText.paypwd2}}</label>
          <input type="password" :placeholder="langText&&langText.pe6d" maxlength="6" @blur="confirmP($event)" />
        </div>
        <div class="form-item">
          <label for="name">{{langText&&langText.itcode}}</label>
          <input type="text" v-model="formData.tjjr" :placeholder="langText&&langText.petic" :readonly='$route.query.uid'/>
        </div>
        <!-- <div class="form-item">
          <label for="name">{{langText&&langText.username}}{{customer.recommender}}</label>
          <input type="text" v-model="formData.tjjr" :placeholder="customer.enter_r" />
        </div> -->
        <!-- <div class="form-item">
          <label for="name">验证码</label>
          <div class="item-flex code">
            <input type="text" placeholder="请输入图中的验证码" v-model="formData.imgcaptcha" maxlength="4" />
            <img
              class="btn img-code"
              :src="api+'/api/Captcha/get?identifier='+randomCode"
              alt
              @click="getRandom()"
            />
          </div>
        </div>-->

        <!-- <div class="form-item">
          <label for="name">{{langText&&langText.yzcode}}</label>
          <div class="item-flex code" >
            <input type="text" :placeholder="langText&&langText.pevc" v-model="formData.catpcha" maxlength="4" />
            <button
              type="button"
              class="btn btn-origin"
              :disabled="seconds>0"
              @click="sendCode()"
            >{{seconds==0?langText&&langText.sendcode:"("+seconds+"s)"}}</button>
          </div>
        </div> -->
        <button type="button" class="btn-submit btn-origin" @click="register()">{{langText&&langText.yesregister}}</button>
      </form>
    </section>
    <m-load ref="load"></m-load>
  </div>
</template>
<script>
import { Init, Base } from "@/server/server.js";
import { Util, Load } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
import { MyTxt,TradeTxt } from "@/assets/commonjs/lan.js";
export default {
  components: {},
  data() {
    return {
      allTxt:null,
      seconds: 0,
      formData: {
        realname:null,
        email: null,
        password: null,
        paypwd: null,
        tjjr: null,
        catpcha: 8888
      },
      randomCode: null,
      env: null,
      langList: [
        {
          id: 1,
          lang: "简体中文"
        },
        {
          id: 2,
          lang: "English"
        },
      ],
      tjMobile: null,
      rule: {
        conFirmE: {
          validate: true,
          msg: "请输入正确的邮箱账号"
        },
        isPwd: {
          validate: true,
          msg: "密码应为6-12位字母+数字"
        },
        conFirmL: {
          validate: true,
          msg: "两次输入密码不一致！"
        },
        conFirmP: {
          validate: true,
          msg: "两次输入密码不一致！"
        }
      },
      customer: {},
      langId: 1,
      lang2:'zh-cn',
      langType: "zh-cn",
      langText:null,
    };
  },
  created() {
    if (!localStorage.getItem("lang")) {
      // this.setLanguage();
    } else {
    }
    let uid = this.$route.query.uid;
    if (uid) {
      this.formData.tjjr = uid;
    }
  },
  mounted() {
    this.initData();
    setTimeout(() => {
      this.setLanguage2()
    }, 100);
  },
  computed: {
    ...mapGetters(["api", "lang",'getLangId'])
  },
  methods: {
    initData() {
      
      if(localStorage.getItem("langId_a" )){
        this.langId = localStorage.getItem("langId_a" )
      }
      if(localStorage.getItem("lang2_a" )){
        this.lang2 = localStorage.getItem("lang2_a" )
      }

      this.env = process.env.NODE_ENV;
      this.allTxt = Object.assign({},MyTxt,TradeTxt)
      this.langId = localStorage.getItem("lang_id")
      this.formData.tjjr = this.$route.query.uid;

      
      if(localStorage.getItem('lang_id')){
        this.langId = localStorage.getItem('lang_id')=='zh-cn'?1:2;
      }else{
        this.langId = 2;
      }

    },
    getlang(){
      Base.getlang().then(res=>{
        if(res.code==1){
          this.langText = Object.assign({},res.data.register,res.data.currency,res.data.nodepower,res.data.prompt,res.data.mine)
          
          this.rule.conFirmE.msg = this.langText.ptcea;
          this.rule.isPwd.msg = this.langText.prule;
          this.rule.conFirmL.msg = this.langText.iipt;
          this.rule.conFirmP.msg = this.langText.iipt;
          this.customer.e_p = this.langText.perror;
        }else{
          mui.toast(res.msg)
        }
      })
    },
    getselLang() {
      switch (this.langId) {
        case 1:
          this.lang2 = 'zh-cn';
          this.setLanguage2();
          
          localStorage.setItem("langId_a", this.langId);
          localStorage.setItem("lang2_a", this.lang2);
          break;
        case 2:
          this.langType = "en";
          this.lang2 = 'en';
          this.setLanguage2();
          localStorage.setItem("langId_a", this.langId);
          localStorage.setItem("lang2_a", this.lang2);
          break;
      }
    },
    setLanguage2() {
      Base.setLanguage2({ lang:this.lang2 }).then(res => {
        if (res.code == 1) {
          this.getlang();
          localStorage.setItem('lang_id',this.lang2)
        }
      });
    },
    sendCode() {
      if (!this.rule.conFirmE.validate || !this.formData.email) {
        mui.toast(this.customer.e_e);
        return;
      }
      this.seconds = 60;
      let get = setInterval(() => {
        this.$nextTick(() => {
          this.seconds = this.seconds - 1;
          if (this.seconds <= 0) {
            clearInterval(get);
          }
        });
      }, 1000);
      // 发送验证码
      Init.send({ email: this.formData.email, event: "register" }).then(res => {
        mui.toast(res.msg);
      });
    },
    register() {
      // let msg = Util.isValidate(this.formData);
      // if (msg) {
      //   mui.toast(msg);
      //   return;
      // } else if (
      //   !this.rule.conFirmE.validate ||
      //   !this.rule.conFirmL.validate ||
      //   !this.rule.conFirmP.validate
      // ) {
      //   mui.toast(this.customer.e_p);
      //   return;
      // }
      if (
        !this.rule.conFirmE.validate ||
        !this.rule.conFirmL.validate ||
        !this.rule.conFirmP.validate
      ) {
        mui.toast(this.customer.e_p);
        return;
      }
      Load.loadStart(this);
      Init.register(this.formData).then(res => {
        if (res.code == 1) {
          mui.toast(res.msg);
          setTimeout(() => {
            Load.loadEnd(this);
            this.$router.replace({ name: "Login" });
          }, 1000);
        } else {
          setTimeout(() => {
            Load.loadEnd(this);
            mui.toast(res.msg);
            return;
          }, 1000);
        }
      });
      // Init.test();
    },
    confirmE() {
      // var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      // var reg = /^[0-9a-z][_.0-9a-z-]{0,31}@([0-9a-z][0-9a-z-]{0,30}[0-9a-z]\.){1,4}[a-z]{2,4}$/;
      var reg = /^[0-9a-zA-Z][_.0-9a-zA-Z-]{0,31}@([0-9a-zA-Z][0-9a-zA-Z-]{0,30}[0-9a-zA-Z]\.){1,4}[a-zA-Z]{2,4}$/;
      if (!reg.test(this.formData.email)) {
        this.rule.conFirmE.validate = false;
        // mui.toast(this.customer.e_e);
        mui.toast(this.rule.conFirmE.msg);
      } else {
        this.rule.conFirmE.validate = true;
      }
    },
    confirmL(event) {
      if (event.target.value != this.formData.password) {
        this.rule.conFirmL.validate = false;
        mui.toast(this.rule.conFirmL.msg);
      } else {
        this.rule.conFirmL.validate = true;
      }
    },
    confirmP(event) {
      if (event.target.value != this.formData.paypwd) {
        this.rule.conFirmP.validate = false;
        mui.toast(this.rule.conFirmL.msg);
        // mui.toast(this.rule.conFirmP.msg);
        // mui.toast(this.rule.conFirmP.msg);
        
      } else {
        this.rule.conFirmP.validate = true;
      }
    },
    // IsMobilePhoneNumber(event) {
    //   var regex = /^((\+)?86|((\+)?86)?)0?1[3458]\d{9}$/;
    //   if (event.target.value.match(regex)) {
    //     this.rule.isMobile.validate = true;
    //   } else {
    //     this.rule.isMobile.validate = false;
    //   }
    // },
    IsIntegerAndEnglishCharacter(input) {
      var regex = /[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/;
      if (!event.target.value.match(regex)) {
        // mui.toast(this.customer.digits);
        // mui.toast(11111111)
        mui.toast(this.rule.isPwd.msg);
        // this.rule.isPwd.validate = true;
      }
      // else {
      //   this.rule.isPwd.validate = false;
      // }
    }
  }
};
</script>

<style scoped lang="less">
@import "~link-less";
.header{
  background-color: #fff !important;
}
.body {
  background-color: #fff;
  color: #333;
  .tj-form {
    margin-top: 0;
    .form-item {
      .display-flex();
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      .item-flex {
        padding: 0 30px;
        flex: 2;
        .btn-origin {
          flex: 1;
          margin: 0;
          background: none;
          color: #406ec3;
          border-left: 1px solid #ddd;
          border-radius: 0;
        }
        & > input {
          flex: 1;
          padding: 0;
          margin: 0;
          background: none;
          color: #000;
          border: none;
        }
      }
      & > label {
        flex: 0.9;
        color: #333;
        font-size: 30px;
      }
      & > input {
        flex: 2;
        margin: 0;
        background: none;
        color: #000;
        border: none;
      }
    }
    .btn-submit {
      margin-top: 30px;
      // margin-top: 136px;
      // background: #406ec3;
    }

    .btn-white {
      background-color: whitesmoke;
      color: #333;
      font-size: 40px;
      letter-spacing: 5px;
      font-family: fantasy; //monospace fantasy
    }
  }
  .error {
    position: absolute;
    color: red;
    font-size: 24px;
    bottom: 0;
    left: 0;
  }
}

.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}

/deep/ .header{
  position: relative;
  
}
.sel{
  color: #000;
  position: absolute;
  top: 0;
  left: 600px;
}
</style >

